import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { HOT_RECOMMEND_LIMIT } from '@/common/contants'
import { getHotRecommendAction } from '../../store/actionCreators';

import DSongsCover from "@/components/songs-cover"
import DThemeHeaderRCM from "@/components/theme-header-rcm";
import {
  HotRecommendWrapper
} from './style'

export default memo(function DHotRecommend() {
  // redux hooks
  const { hotRecommends } = useSelector(state => ({
    hotRecommends: state.getIn(["recommend", "hotRecommends"])
  }), shallowEqual)
  const dispatch = useDispatch()

  // 其他hooks
  useEffect(() => {
    dispatch(getHotRecommendAction(HOT_RECOMMEND_LIMIT))
  }, [dispatch])

  return (
    <HotRecommendWrapper>
      <DThemeHeaderRCM title="热门推荐" keyword={["华语", "流行", "摇滚", "民谣", "电子"]} />
      <div className="recommend-list">
        {
          hotRecommends.map((item, index) => {
            return (
              <DSongsCover key={item.id} info={item}/>
            )
          })
        }
      </div>
      
    </HotRecommendWrapper>
  )
})
